<template>

      
     <div id="sticky-header" class="menu-area">
        <div class="container custom-container">
          <div class="row">
            <div class="col-12">
              <div class="mobile-nav-toggler"><i class="fas fa-bars"></i></div>
              <div class="menu-wrap">
                <nav class="menu-nav">
                  <div class="logo d-block d-lg-none">
                    <a href="/"
                      ><img src="img/logo/logo.png" alt=""
                    /></a>
                  </div>
                  <!-- 商品目录树 -->
                  <div class="header-category d-none d-lg-block">
                    <a href="#" @click.prevent="(ALL_DEPARTMENT_isShow=!ALL_DEPARTMENT_isShow)" class="cat-toggle"
                      ><i class="fas fa-bars"></i>{{$t('head.ALL_DEPARTMENT')}}<i
                        class="fas fa-angle-down"
                      ></i
                    ></a>
                    <ul :style="`display: `+(!ALL_DEPARTMENT_isShow ? `none` :`block`)" class="category-menu">
                      <li class="menu-item-has-children">
                        <a href="shop.html"
                          ><i class="flaticon-groceries"></i> Grocery &
                          Frozen</a
                        >
                        <ul class="megamenu">
                          <li class="sub-column-item">
                            <a href="shop.html">Grocery & Frozen</a>
                            <ul>
                              <li><a href="shop.html">Organic Broccoli</a></li>
                              <li><a href="shop.html">Walnuts Max</a></li>
                              <li><a href="shop.html">Mat Orange</a></li>
                              <li><a href="shop.html">France Potato</a></li>
                            </ul>
                          </li>
                          <li class="sub-column-item">
                            <a href="shop.html">Organic Fresh Fruits</a>
                            <ul>
                              <li><a href="shop.html">Watermelon</a></li>
                              <li><a href="shop.html">Black Grapes</a></li>
                              <li><a href="shop.html">Grassland Dairy</a></li>
                              <li><a href="shop.html">Organic Broccoli</a></li>
                            </ul>
                          </li>
                          <li class="sub-column-item">
                            <a href="shop.html">Fresh Bread & Bakery</a>
                            <ul>
                              <li><a href="shop.html">Grassland Dairy</a></li>
                              <li><a href="shop.html">Walnuts Max</a></li>
                              <li><a href="shop.html">Powders Dairy</a></li>
                              <li><a href="shop.html">Ice cream</a></li>
                            </ul>
                          </li>
                          <li class="sub-column-item">
                            <a href="shop.html">Organic Fresh Meat</a>
                            <ul>
                              <li><a href="shop.html">Fresh Butter</a></li>
                              <li><a href="shop.html">Orange Sliced</a></li>
                              <li><a href="shop.html">Carrots Group</a></li>
                              <li><a href="shop.html">Poultry Farm</a></li>
                            </ul>
                          </li>
                          <li class="sub-column-item">
                            <a href="shop.html">Organic Dried Fruit</a>
                            <ul>
                              <li><a href="shop.html">Fresh Nuts</a></li>
                              <li><a href="shop.html">France Potato</a></li>
                              <li><a href="shop.html">Green Chilies</a></li>
                              <li><a href="shop.html">Organic Broccoli</a></li>
                            </ul>
                          </li>
                          <li class="sub-column-item">
                            <a href="shop.html">Organic Other Foods</a>
                            <ul>
                              <li class="mega-menu-banner">
                                <a href="shop.html"
                                  ><img
                                    src="img/images/megamenu_banner.jpg"
                                    alt=""
                                /></a>
                              </li>
                            </ul>
                          </li>
                        </ul>
                      </li>
                      <li>
                        <a href="shop.html"
                          ><i class="flaticon-cherry"></i> Fresh Fruits</a
                        >
                      </li>
                      <li>
                        <a href="shop.html"
                          ><i class="flaticon-fish"></i> Fresh Fish</a
                        >
                      </li>
                      <li class="menu-item-has-children">
                        <a href="shop.html"
                          ><i class="flaticon-hazelnut"></i> Fresh Nuts</a
                        >
                        <ul class="megamenu">
                          <li class="sub-column-item">
                            <a href="shop.html">Grocery & Frozen</a>
                            <ul>
                              <li><a href="shop.html">Organic Broccoli</a></li>
                              <li><a href="shop.html">Walnuts Max</a></li>
                              <li><a href="shop.html">Mat Orange</a></li>
                              <li><a href="shop.html">France Potato</a></li>
                            </ul>
                          </li>
                          <li class="sub-column-item">
                            <a href="shop.html">Organic Fresh Fruits</a>
                            <ul>
                              <li><a href="shop.html">Watermelon</a></li>
                              <li><a href="shop.html">Black Grapes</a></li>
                              <li><a href="shop.html">Grassland Dairy</a></li>
                              <li><a href="shop.html">Organic Broccoli</a></li>
                            </ul>
                          </li>
                          <li class="sub-column-item">
                            <a href="shop.html">Fresh Bread & Bakery</a>
                            <ul>
                              <li><a href="shop.html">Grassland Dairy</a></li>
                              <li><a href="shop.html">Walnuts Max</a></li>
                              <li><a href="shop.html">Powders Dairy</a></li>
                              <li><a href="shop.html">Ice cream</a></li>
                            </ul>
                          </li>
                          <li class="sub-column-item">
                            <a href="shop.html">Organic Fresh Meat</a>
                            <ul>
                              <li><a href="shop.html">Fresh Butter</a></li>
                              <li><a href="shop.html">Orange Sliced</a></li>
                              <li><a href="shop.html">Carrots Group</a></li>
                              <li><a href="shop.html">Poultry Farm</a></li>
                            </ul>
                          </li>
                          <li class="sub-column-item">
                            <a href="shop.html">Organic Dried Fruit</a>
                            <ul>
                              <li><a href="shop.html">Fresh Nuts</a></li>
                              <li><a href="shop.html">France Potato</a></li>
                              <li><a href="shop.html">Green Chilies</a></li>
                              <li><a href="shop.html">Organic Broccoli</a></li>
                            </ul>
                          </li>
                          <li class="sub-column-item">
                            <a href="shop.html">Organic Other Foods</a>
                            <ul>
                              <li class="mega-menu-banner">
                                <a href="shop.html"
                                  ><img
                                    src="img/images/megamenu_banner02.jpg"
                                    alt=""
                                /></a>
                              </li>
                            </ul>
                          </li>
                        </ul>
                      </li>
                      <li>
                        <a href="shop.html"
                          ><i class="flaticon-meat"></i> Fresh Meat</a
                        >
                      </li>
                      <li class="menu-item-has-children">
                        <a href="shop.html"
                          ><i class="flaticon-cupcake"></i> Bread & Bakery</a
                        >
                        <ul class="megamenu">
                          <li class="sub-column-item">
                            <a href="shop.html">Grocery & Frozen</a>
                            <ul>
                              <li><a href="shop.html">Organic Broccoli</a></li>
                              <li><a href="shop.html">Walnuts Max</a></li>
                              <li><a href="shop.html">Mat Orange</a></li>
                              <li><a href="shop.html">France Potato</a></li>
                            </ul>
                          </li>
                          <li class="sub-column-item">
                            <a href="shop.html">Organic Fresh Fruits</a>
                            <ul>
                              <li><a href="shop.html">Watermelon</a></li>
                              <li><a href="shop.html">Black Grapes</a></li>
                              <li><a href="shop.html">Grassland Dairy</a></li>
                              <li><a href="shop.html">Organic Broccoli</a></li>
                            </ul>
                          </li>
                          <li class="sub-column-item">
                            <a href="shop.html">Fresh Bread & Bakery</a>
                            <ul>
                              <li><a href="shop.html">Grassland Dairy</a></li>
                              <li><a href="shop.html">Walnuts Max</a></li>
                              <li><a href="shop.html">Powders Dairy</a></li>
                              <li><a href="shop.html">Ice cream</a></li>
                            </ul>
                          </li>
                          <li class="sub-column-item">
                            <a href="shop.html">Organic Fresh Meat</a>
                            <ul>
                              <li><a href="shop.html">Fresh Butter</a></li>
                              <li><a href="shop.html">Orange Sliced</a></li>
                              <li><a href="shop.html">Carrots Group</a></li>
                              <li><a href="shop.html">Poultry Farm</a></li>
                            </ul>
                          </li>
                          <li class="sub-column-item">
                            <a href="shop.html">Organic Dried Fruit</a>
                            <ul>
                              <li><a href="shop.html">Fresh Nuts</a></li>
                              <li><a href="shop.html">France Potato</a></li>
                              <li><a href="shop.html">Green Chilies</a></li>
                              <li><a href="shop.html">Organic Broccoli</a></li>
                            </ul>
                          </li>
                          <li class="sub-column-item">
                            <a href="shop.html">Organic Other Foods</a>
                            <ul>
                              <li class="mega-menu-banner">
                                <a href="shop.html"
                                  ><img
                                    src="img/images/megamenu_banner.jpg"
                                    alt=""
                                /></a>
                              </li>
                            </ul>
                          </li>
                        </ul>
                      </li>
                      <li>
                        <a href="shop.html"
                          ><i class="flaticon-broccoli"></i> Vegetable</a
                        >
                      </li>
                      <li>
                        <a href="shop.html"
                          ><i class="flaticon-pop-corn-1"></i> Popcorn</a
                        >
                      </li>
                      <li>
                        <a href="shop.html"
                          ><i class="flaticon-nut"></i> Dried Fruit</a
                        >
                      </li>
                    </ul>
                  </div>
                  <!-- 导航栏 -->
                  <div class="navbar-wrap main-menu d-none d-lg-flex">
                    <ul class="navigation" id="navigation"  ref="navigation">
                     
                      <li :class="(pagemark==='/') ?`active`:``"  @click.prevent="$store.commit('temporary/setpagemark','/')" ><router-link to="/"  >主页</router-link></li>
                      <li :class="(pagemark===na.pagemark) ?`active`:``" @click.prevent="$store.commit('temporary/setpagemark',na.pagemark)" v-for="na in navigation" :key="na.id"><router-link :to="na.url" >{{na.name}}</router-link></li>
                      <li :class="(pagemark==='cart') ?`active`:``" @click.prevent="$store.commit('temporary/setpagemark','cart')" v-if="ifLogin"><router-link to="/cart">购物车</router-link></li>
                      <!-- <li ><router-link to="/storemap">门店地图</router-link></li> -->                    
                    </ul>
                  </div>
                  <!-- 分店 -->
                  <div
                    class="
                      header-super-store
                      d-none d-xl-block d-lg-none d-md-block
                    "
                    v-if="false"
                  >
                    <div class="dropdown">
                      <button
                        class="dropdown-toggle"
                        type="button"
                        id="dropdownMenuButton4"
                        data-toggle="dropdown"
                        aria-haspopup="true"
                        aria-expanded="false"
                      >
                        <i class="flaticon-shop"></i>连锁超市
                      </button>
                      <div
                        class="dropdown-menu"
                        aria-labelledby="dropdownMenuButton4"
                      >
                        <a v-for="subbranch in subbranchlist" class="dropdown-item" :href="'/'+subbranch.id+'/'+subbranch.name" :key="subbranch.id"
                          >{{subbranch.name}}</a
                        >
                     
                      </div>
                    </div>
                  </div>
                </nav>
              </div>
              <!-- Mobile Menu  -->
              <div class="mobile-menu">
                <nav class="menu-box">
                  <div class="close-btn"><i class="fas fa-times"></i></div>
                  <div class="nav-logo">
                    <a href="index.html"
                      ><img src="img/logo/logo.png" alt="" title=""
                    /></a>
                  </div>
                  <div class="menu-outer">
                    <!--Here Menu Will Come Automatically Via Javascript / Same Menu as in Header-->
                  </div>
                  <div class="social-links">
                    <ul class="clearfix">
                      <li>
                        <a href="#"><span class="fab fa-twitter"></span></a>
                      </li>
                      <li>
                        <a href="#"><span class="fab fa-facebook-f"></span></a>
                      </li>
                      <li>
                        <a href="#"><span class="fab fa-pinterest-p"></span></a>
                      </li>
                      <li>
                        <a href="#"><span class="fab fa-instagram"></span></a>
                      </li>
                      <li>
                        <a href="#"><span class="fab fa-youtube"></span></a>
                      </li>
                    </ul>
                  </div>
                </nav>
              </div>
              <div class="menu-backdrop"></div>
              <!-- End Mobile Menu -->
            </div>
          </div>
        </div>
      </div>
  
</template>

<script>
import { mapActions,mapMutations,mapState } from 'vuex'

import { isNullOrUndefind } from '@/utils/utils'
export default {
    data() {
      return {
        ALL_DEPARTMENT_isShow:false,
        RouterPrefix:'/#',
        subbranchlist:[],
       
      }
    },
    computed:{
      ...mapState({
          customer:state=>state.customer.customer,
          account:state=>state.customer.account,
          navigation:state=>state.dynamicrouter.headnavigationList,
          pagemark:state=>state.temporary.pagemark
        }),
        ifLogin(){
          // console.log(isNullOrUndefind(this.customer)&&isNullOrUndefind(this.account))
            return isNullOrUndefind(this.customer)&&isNullOrUndefind(this.account)
        }
    },
    methods: {
      
     
    },
  
      created() {
       //获取导航栏
         this.$store.dispatch('dynamicrouter/getheadnavigationList')
      },
      mounted() {
     
      },
}
</script>

<style>
 
</style>